/**
 * @下方有数据的map
 */
import * as echarts from "echarts";
import JingNingGeoJson from "../map/JingNing.json";
import { ref } from "vue";
import {
    blueCircle,
    blueTri,
    deepblueCircle,
    deepblueTri,
    yellowCircle,
    yellowTri,
} from "../map/mapSymbol";

export default function () {
    const options = ref({});

    const points = ref([
        {
            name: "test1",
            value: [119.55666254743842, 27.82141584464708],
            stationType: 1,
            // ...
        },
        {
            name: "test2",
            value: [119.87821554805862, 28.020099017863792],
            stationType: 1,
        },
        {
            name: "test3",
            value: [119.59340854825047, 27.84561425926045],
            stationType: 1,
        },
    ]);
    const setOptions = (list = []) => {
        let data = [];
        if (!list.length) data = points.value;
        else data = list;

        //经流式
        const blueCircleList = data.filter((item) => item.stationType == 2);
        // 库容式
        const blueTriList = data.filter((item) => item.stationType == 1);
        //光伏集中式
        const yellowCircleList = data.filter((item) => item.stationType == 3);
        // 光伏分布式
        const yellowTriList = data.filter((item) => item.stationType == 4);

        const symbolSize = 26;

        options.value = {
            // 下方阴影
            geo: {
                map: "JN",
                silent: true,
                roam: false,
                zoom: 1.2,
                top: 62,
                aspectScale: 1,

                itemStyle: {
                    areaColor: "rgba(4, 46, 98, 0)",
                    shadowColor: "rgba(9, 226, 248, 0)",
                    shadowBlur: 0,
                    shadowOffsetX: 0,
                    shadowOffsetY: 5,
                    borderColor: "rgb(0,0,0,0)",
                    borderWidth: 0,
                    opacity: 0.5,
                },
            },
            tooltip: {
                show: true,
                confine: true,
                backgroundColor: "rgba(35, 69, 172, 0.8)",
                textStyle: {
                    color: "#fff",
                },
                borderWidth: 0,
                formatter: function (params) {
                    return `${params.data.stationName}`;
                },
            },
            series: [
                // 上方可交互地图
                {
                    type: "map",
                    map: "JNBG",
                    selectedMode: false,
                    aspectScale: 1,
                    left:64,
                    top: 64,
                    zoom: 1.2,
                    silent: true,
                    label: {
                        show: false,
                        color: "#fff",
                        formatter: (params) => {
                            // console.log(params);
                            return `{name|${params.name}}`;
                        },
                        rich: {
                            name: {
                                fontSize: 12,
                                fontWeight: 400,
                            },
                        },
                    },
                    itemStyle: {
                        borderColor: "rgb(9, 226, 248, 0)",
                        borderWidth: 1,
                        areaColor: "rgb(12,46,98,0)",
                        opacity: 1,
                    },
                    emphasis: {

                        // label: {
                        //   show: true,
                        //   color: "#fff",
                        // },
                        // itemStyle: {
                        //   borderColor: "rgb(89,196,255, 1)",
                        //   borderWidth: 1,
                        //   areaColor: "rgb(12,46,98,0.5)",
                        //   shadowColor: "rgba(135, 215, 255, 1)",
                        //   shadowBlur: 30,
                        //   opacity: 1,
                        // },
                    },
                },
                {
                    name: "光伏集中式",
                    type: "scatter",
                    coordinateSystem: "geo",
                    geoIndex: 0,
                    zlevel: 1,
                    symbol: "image://" + yellowCircle,
                    symbolSize: [symbolSize, symbolSize],
                    data: yellowCircleList,
                    emphasis: {
                        scale: 1.4,
                    },
                },
                {
                    name: "光伏分布式",
                    type: "scatter",
                    coordinateSystem: "geo",
                    geoIndex: 0,
                    zlevel: 1,
                    symbol: "image://" + yellowTri,
                    symbolSize: [symbolSize, symbolSize],
                    data: yellowTriList,
                    emphasis: {
                        scale: 1.4,
                    },
                },
                {
                    name: "经流式",
                    type: "scatter",
                    coordinateSystem: "geo",
                    geoIndex: 0,
                    zlevel: 1,
                    symbol: "image://" + blueCircle,
                    symbolSize: [symbolSize, symbolSize],
                    data: blueCircleList,
                    emphasis: {
                        scale: 1.4,
                    },
                },
                {
                    name: "库容式",
                    type: "scatter",
                    coordinateSystem: "geo",
                    geoIndex: 0,
                    zlevel: 1,
                    symbol: "image://" + blueTri,
                    symbolSize: [symbolSize, symbolSize],
                    data: blueTriList,
                    emphasis: {
                        scale: 1.4,
                    },
                },
                // {
                //   name:'充电站集中式',
                //   type: "scatter",
                //   coordinateSystem: "geo",
                //   geoIndex: 0,
                //   zlevel: 1,
                //   symbol: "image://" + deepblueCircle,
                //   symbolSize: [24, 24],
                //   data,
                // },
                // {
                //   name:'充电站集中式',
                //   type: "scatter",
                //   coordinateSystem: "geo",
                //   geoIndex: 0,
                //   zlevel: 1,
                //   symbol: "image://" + deepblueTri,
                //   symbolSize: [24, 24],
                //   data,
                // },
            ],
        };
    };

    return {
        options,
        setOptions,
    };
}
